<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->

    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .pagination-container .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 0;
        border-radius: 4px;
    }

    .pagination-container .pagination-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pagination-container .pagination-list li {
        display: inline-block;
    }

    .pagination-container .pagination-list li a {
        color: #337ab7;
        padding: 6px 12px;
        margin: 0 3px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .pagination-container .pagination-list li a:hover {
        background-color: #337ab7;
        color: #fff;
    }

    .pagination-container .pagination-list .active a {
        background-color: #337ab7;
        color: #fff;
    }
    /*.layui-nav-item.layui-this > a {*/
    /*    background-color: white;*/
    /*    color: black !important;*/
    /*    font-size: 16px !important;*/
    /*}*/
    .title {
        font-size: 24px;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
    }
    .welcome-text{
        color:aquamarine;
        margin: 10px 10px 5px  10px;
    }
    .layui-table {
        margin: 0 auto;
        width: 600px;
        border-collapse: collapse;
    }

    .layui-table th,
    .layui-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    .layui-table th {
        background-color: #f2f2f2;
        color: #333;
    }
    .layui-side {
        width: 200px;
    }

    .layui-side-scroll {
        height: calc(100% - 60px);
        overflow: auto;
    }

    .layui-nav-item {
        line-height: 50px;
    }

    .layui-body {
        padding: 20px;
    }

    .headpic{
        height: 100px;
        width: 100px;
        margin:0 50px;
    }

    .big {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 将`big`区域分为两列 */
        grid-template-rows: repeat(2, 1fr); /* 将`big`区域分为两行 */
        gap: 20px; /* 区域之间的间隔，可根据需要自行修改 */
    }

    .quarter-div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .T {
        width: 100%; /* 图片宽度为容器的100% */
        height: 100%; /* 图片高度为容器的100% */
        object-fit: cover; /* 调整图片比例，保持填充容器 */
    }

</style>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">职工后台管理系统</div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div class="logo-wrapper">
                <div class="logo-img">
                    <img class="headpic" th:src="@{${session.user.pictRoad}}">
                </div>
                <div class="welcome-text" >
                    <p th:text="'欢迎您,尊贵的'+${session.user.username}+'！'"></p>
                </div>
            </div>
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">员工信息</a>
                    <dl class="layui-nav-child">
                        <dd><a id="nav-salary" th:href="@{/index}">员工薪酬信息</a></dd>
                        <dd><a id="nav-department" th:href="@{/user_show}">员工部门信息</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a id="nav-visualization" th:href="@{/showTable}">可视化展示</a>
                </li>
                <li class="layui-nav-item">
                    <a th:href="@{/login.html}">退出</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
    <div class="big">
        <div class="quarter-div">
            <img class="T" th:src="@{/table/xian.png}" alt="Image 1">
        </div>
        <div class="quarter-div">
            <img class="T" th:src="@{/table/zhu.png}" alt="Image 2">
        </div>
        <div class="quarter-div">
            <img class="T" th:src="@{/table/bing.png}" alt="Image 3">
        </div>
        <div class="quarter-div">
            <b>员工最高年龄:<span th:text="${maxAge}" style="size: 20px; color: #337ab7" ></span>岁.</b><br/>
            <b>最高年龄姓名:<span th:text="${maxAgeman}"style="size: 20px; color: #557ab7" ></span>.</b><br/>
            <b>员工最高工龄:<span th:text="${maxYear}" style="size: 20px; color: #826ab7"></span>年.</b><br/>
            <b>最高工龄姓名:<span th:text="${maxYearman}" style="size: 20px; color: #7746b7"></span>.</b><br/>
            <b>员工平均工资:<span th:text="${midSal}" style="size: 20px; color: #aa4415"></span>元.</b><br/>
        </div>
    </div>





</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        var $=layui.$;
        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        console.log(currentUrl);
        // 根据当前 URL 判断并设置高亮
        if (currentUrl.includes('/index')) {
            $('#nav-salary').addClass('layui-this');
        } else if (currentUrl.includes('/user_show')) {
            $('#nav-department').addClass('layui-this');
        } else if (currentUrl.includes('/showTable')) {
            $('#nav-visualization').addClass('layui-this');
        }

        element.render('nav', 'test');
    });
</script>
</script>
</body>
</html>